<template>
  <!-- 书籍详情页轮播图组件 -->
  <div class="detailsTopBanner">
    <div id="banner" class="carousel slide" data-ride="carousel" data-interval=3500>
      
      <div class="carousel-inner content">
        <div v-for="(v, k) in this.$store.state.detailsNavigation" :class="{'carousel-item': true, 'active': k == 0}">
          <div class="card mb-3 border-0">
            <!-- 轮播图背景 -->
            <div class="bgImg">
              <img :src="v.bgimg" class="d-block" alt="">
            </div>
            <!-- 轮播图文字介绍 -->
            <div class="card-body childrens text-white">
              <h5 class="card-title">{{v.title}}</h5>
              <p class="card-text" >{{v.desc}}</p>
              <router-link to='/bookDetails'>
                <a :href="v.target" class="btn btn-primary" @click="getInto(v.target)">See More</a>
              </router-link>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: 'DetailsTopBanner',
    data () {
      return {
        
      }
    },
    mounted() {
      // 组件在当前生命周期请求轮播图信息
      this.$store.dispatch('asynGetDetailsTopBannerData');
    },
    methods: {
      getInto(index) {
        // 改变本地当前的书籍Id
        localStorage.setItem('booksId', index);
      }
    }
  }

  

</script>

<style scoped>
  #banner, .bgImg {
    width: 100%;
    height: 70vh;
    }

  .content  img {
    width: 100%;
    height: 70vh;
  }

  .bgImg img {
    height:100%;
  }

  .childrens {
    width: 100%;
    background-color: rgba(0, 0, 0, .6);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .childrens img {
    height: 100%;
  }

  @media (max-width: 575px) {
    .detailsTopBanner {
      margin-top: 56px;
    }
    #banner, .bgImg {
      height: 35vh;
    }
  }

  @media (min-width: 576px) and (max-width: 767px) {
    .detailsTopBanner {
      margin-top: 56px;
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {
    #banner, .bgImg {
      height: 45vh;
    }
  }

  @media (min-width: 992px) and (max-width: 1199px) {
     #banner, .bgImg {
      height: 50vh;
    }
  }

  @media (min-width: 1200px) {
    
  }
</style>